<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环语句</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <ol>
            <li v-for="site in sites">{{site.name}}</li>
        </ol>

        <hr>

        <ul>
            <li v-for="value in obj">{{value}}</li>
        </ul>

        <hr>

        <ul>
            <li v-for="(key, value) in obj">
                {{key}} : {{value}}
            </li>
        </ul>

        <ul>
            <li v-for="(key, value, index) in obj">
                {{index}} : {{key}} : {{value}}
            </li>
        </ul>

        <!-- v-for也可以循环整数 -->
        <ol>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ol>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const x = new Vue({
        data() {
            return {
                sites: [
                    {name: "baidu"},
                    {name: "Google"},
                    {name: "FireFox"},
                ],
                obj: {
                    name: "菜鸟",
                    url: "https://www.runoob.com/vue2/vue-loop.html",
                    slogan: "学的不仅是技术，更是梦想！"
                }
            }
        }
    }).$mount("#root")
</script>
</html>